
<h5>Create Ticket:</h5>
<form (ngSubmit)="onSubmit(ticketForm)" #ticketForm="ngForm">

  <div class="form-group">
    <label for="description">* Description (min 10 characters):</label>
    <input
      type="text"
      class="form-control"
      placeholder="Description"
      id="description"
      [(ngModel)]="model.description"
      name="description"
      #description="ngModel"
      minlength="10"
      required>
  </div>
  <div class="form-group">
    <label for="assigned">* Assigned:</label>
    <select
      class="form-control"
      id="assigned"
      [(ngModel)]="model.assigned"
      name="assigned"
      #assigned="ngModel"
      required>
      <option value="juan">Juan</option>
      <option value="derek">Derek</option>
      <option value="steven">Steven</option>
    </select>
  </div>
  <div class="form-group">
    <label for="priority">* Priority:</label>
    <select
      class="form-control"
      id="priority"
      [(ngModel)]="model.priority"
      name="priority"
      #priority="ngModel"
      required>
      <option value="low">Low</option>
      <option value="medium">Medium</option>
      <option value="high">High</option>
    </select>
  </div>
  <div class="form-group">
    <label for="status">* Status:</label>
    <select
      class="form-control"
      id="status"
      [(ngModel)]="model.status"
      name="status"
      #status="ngModel"
      required>
      <option value="open">Open</option>
      <option value="assigned">Assigned</option>
      <option value="closed">Closed</option>
    </select>
  </div>
  <div class="form-group">
    <div>* = required field</div>
    <button type="submit" class="awsui awsui-button" [disabled]="!ticketForm.valid">Create</button>
  </div>

</form>

<hr/>
<span><b>All Tickets:</b> &nbsp; <button class="awsui awsui-button" (click)="refresh()">Refresh Ticket Table</button></span>
<div>
  <ngx-datatable
    class="material"
    [rows]="rows"
    [columns]="[
      {name:'assigned'},
      {name:'priority'},
      {name:'status'},
      {name:'createdOn'},
      {name:'createdBy'}
      ]"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="'auto'">
  </ngx-datatable>
</div>
<ngx-toasta
  [position]="'bottom-fullwidth'"></ngx-toasta>
